<template>
  <div class="base-form-container">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="baseFormRef"
      label-width="100px"
      class="base-form"
    >
      <el-form-item
        label="编码"
        prop="nodeCode"
      >
        <el-input
          v-model="ruleForm.nodeCode"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item
        label="名称"
        prop="nodeName"
      >
        <el-input v-model="ruleForm.nodeName"></el-input>
      </el-form-item>
      <el-form-item
        label="表名"
        prop="tableName"
      >
        <el-input v-model="ruleForm.tableName">
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="handleOpenTableDialog"
          ></el-button>
        </el-input>
      </el-form-item>
    </el-form>

    <el-dialog
      v-dialog-drag
      width="80%"
      title="实体表"
      :visible.sync="tableDialog.visible"
      :modal="false"
      :appendToBody="false"
      :close-on-click-modal="false"
      top="3vh"
    >
      <div class="tool-search">
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="tableDialog.keyword"
          clearable
          @keyup.enter.native="handleTableSearch"
        >
        </el-input>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-search"
          @click="handleTableSearch"
        >查询</el-button>
      </div>
      <div class="tool-table">
        <el-table
          ref="Table"
          :data="tableDialog.tableData"
          stripe
          border
          tooltip-effect="dark"
          style="width: 100%"
          height="calc(100% - 50px - 15px)"
          @select="handleTableSelect"
          @row-click="handleRowClick"
        >
          <el-table-column
            type="selection"
            width="55"
          >
          </el-table-column>
          <el-table-column
            v-for="col in tableDialog.columns"
            :key="col.prop"
            :prop="col.prop"
            :label="col.label"
            show-overflow-tooltip
            :min-width="col.minWidth"
          >
          </el-table-column>
        </el-table>
        <div class="pagination">
          <pagination
            v-show="tableDialog.pager.total>0"
            :total="tableDialog.pager.total"
            :page.sync="tableDialog.pager.pageNum"
            :limit.sync="tableDialog.pager.pageSize"
            @pagination="getTableData"
          />
        </div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="handleFinishTableSelect"
        >确 定</el-button>
        <el-button @click="tableDialog.visible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getTables } from '@/api/import/template'
export default {
  name: 'import-template-baseform',
  props: {
    data: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      ruleForm: {
        nodeCode: '',
        nodeName: '',
        tableName: ''
      },
      rules: {
        nodeName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        tableName: [
          { required: true, message: '请选择数据表', trigger: 'blur' }
        ]
      },
      tableDialog: {
        visible: false,
        keyword: '',
        columns: [
          {
            prop: 'tableName',
            label: '实体表名',
            minWidth: '100'
          },
          {
            prop: 'tableDesc',
            label: '描述',
            minWidth: '100'
          }
        ],
        tableData: [],
        pager: {
          total: 0,
          pageNum: 1,
          pageSize: 10
        }
      }
    }
  },
  methods: {
    handleOpenTableDialog() {
      this.getTableData()
      this.tableDialog.visible = true
    },
    handleTableSearch() {
      this.tableDialog.pager.pageNum = 1
      this.getTableData()
    },
    handleFinishTableSelect() {
      const selection = this.$refs.Table.selection
      const tableName = selection[0]?.tableName
      this.ruleForm.tableName = tableName
      this.tableDialog.visible = false
      this.$emit('selected', tableName)
    },
    getTableData() {
      const { pager, keyword } = this.tableDialog
      getTables(pager.pageNum, pager.pageSize, keyword).then((res) => {
        this.tableDialog.pager.total = res.data.total
        this.tableDialog.tableData = res.data.records
      })
    },
    handleRowClick(row) {
      this.tableSelectControl(row)
    },
    handleTableSelect(selection, row) {
      this.tableSelectControl(row)
    },
    tableSelectControl(row) {
      row.flag = !row.flag
      this.$refs.Table.clearSelection()
      this.tableDialog.tableData.forEach((ele) => {
        if (ele.tableName !== row.tableName) {
          ele.flag = false
        }
      })
      this.$refs.Table.toggleRowSelection(row, row.flag)
    },
    getFromData() {
      return {
        ...this.data,
        ...this.ruleForm
      }
    }
  },
  watch: {
    data: {
      handler(newVal, oldVal) {
        if (!newVal || newVal.id === oldVal.id) {
          return
        }
        this.ruleForm = {
          nodeCode: newVal.nodeCode || '',
          nodeName: newVal.nodeName || '',
          tableName: newVal.tableName || ''
        }
      },
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
.base-form-container {
  ::v-deep .el-dialog__body {
    height: calc(70vh - 170px);
  }
}
.base-form {
  overflow: hidden;
  .el-form-item {
    width: 50%;
    float: left;
  }
}
// .footer {
//   position: absolute;
//   bottom: 0;
//   right: 0;
// }
.tool-search {
  display: flex;
  .el-input {
    width: 250px;
    margin-right: 10px;
  }
}
.tool-table {
  margin-top: 15px;
  height: calc(100% - 51px);
}
.pagination {
  overflow: hidden;
  .pagination-container {
    margin-bottom: 0;
  }
}
</style>